<!--
 * @Author: your name
 * @Date: 2020-11-03 16:20:06
 * @LastEditTime: 2021-01-13 16:33:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\cart\index.vue
-->
<template>
  <div class="w1200auto cart">
    <div class="cart_box">
        <h3 class="relative size26 ptb10">{{$t('cart.SHOPPING CART')}}</h3>
        <el-alert
          title="You added DEMO-1 to your shopping cart."
          type="success"
          class="mb10"
          show-icon>
        </el-alert>
        <ul class="cart_menu b plr20">
          <li class="cart_menu_li s8">{{$t('cart.Item details')}}</li>
          <li class="cart_menu_li s2 text_c">{{$t('cart.Quantity')}}</li>
          <li class="cart_menu_li s2 text_r">{{$t('cart.Price')}}</li>
        </ul>
        <ul class="cart_product">
          <li class="cart_li" v-for="(item, index) of arrData" :key="'item' + index">
            <div class="cart_li_top ptb10">
              <div class="cart_img mr100">
                <img :src="require('~/assets/image/1_7.jpg')" alt="" class="img">
              </div>
              <ul class="cart_desc pl20 spacing">
                <li class="cart_desc_li size12 ptb5">{{$t('Color')}}: Red</li>
                <li class="cart_desc_li size12 ptb5">{{$t('Prescription type')}}: Progressive(No Line Multi-Focal)</li>
                <li class="cart_desc_li size12 ptb5">{{$t('cart.Prism Details')}}: <span class="gradients pointer" @click="checkPrism()"><i class="el-icon-tickets size14"></i></span></li>
                <li class="cart_desc_li size12 ptb5">{{$t('cart.Uploaded Prescription Details')}}: <span class="gradients pointer" @click="checkPrescription()"><i class="el-icon-picture size14"></i></span></li>
              </ul>
              <div class="cart_del s2 size12 pointer">
                <span class="del_info pointer gradients">{{$t('cart.Remove')}}</span>
              </div>
              <div class="cart_add">
                <el-input-number size="mini" :min="1" @change="handleChange(item)" v-model="item.a"></el-input-number>
              </div>
              <div class="cart_frame">
                <span class="size12 mr20">{{$t('Frame')}}:<span class="cart_frame_price b size12 ml10">{{$t('$')}}180.00</span></span>
              </div>              
            </div>
            <div class="cart_li_bottom relative ptb10">
              <ul class="cart_option">
                <li class="cart_option_li size12 mb20">{{$t('Lens Name')}}: 1.61 clear-test-12</li>
                <li class="cart_option_li size12 mb20">{{$t('Lens Type')}}: Clear</li>
                <li class="cart_option_li size12 mb20">{{$t('Refractive Index')}}: 1.61</li>
                <li class="cart_option_li size12 mb20">{{$t('Final Price')}}: 53.00</li>
                <li class="cart_option_li size12 mb20">
                  {{$t('Image')}}:
                  <img src="http://192.168.9.103/media/lens/pdc/buy6_09.jpg" alt="" class="img">
                </li>
              </ul>
              <div class="cart_item spacing">
                <table class="cart_table">
                    <thead>
                      <tr>
                        <th class="cart_table_th size12 pb10">{{$t('Sphere(SPH)')}}</th>
                        <th class="cart_table_th size12 pb10">{{$t('Cylinder(CYL)')}}</th>
                        <th class="cart_table_th size12 pb10">{{$t('Axis(AXI)')}}</th>
                        <th class="cart_table_th size12 pb10">{{$t('PD')}}</th>
                        <th class="cart_table_th size12 pb10">{{$t('ADD')}}</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr></tr>
                        <tr class="tr">
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">-0.25</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">-0.25</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">1</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">18.5</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">+1.25</td>
                        </tr>
                        <tr class="tr">
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">-0.25</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">-0.25</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">1</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10">18.5</td>
                          <td class="cart_table_td size12 text_c mtb10 mlr0 ptb10"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="size16 pointer mt30 mr15 gradients" @click="cartEdit()">
                    <i class="el-icon-edit-outline"></i>
                    <span class="">{{$t('cart.Edit')}}</span>
                </div>
              </div>
              <div class="cart_lenses">
                <span class="cart_lenses_title size12 mr20">{{$t('Lenses')}}:<span class="cart_lenses_price size12 b ml10">{{$t('$')}}53.00</span></span>
              </div>
              <div class="cart_subtotal absolute">
                <span class="cart_subtotal_title size12">{{$t('Subtotal')}}:<span class="cart_subtotal_price size12 b ml10">{{$t('$')}}243.95</span></span>
              </div>
            </div>
          </li>
        </ul>
        <div class="cart_coupon ptb20">
          <div class="cart_coupon_left">
            <div class="cart_question size16 b ptb10">{{$t('cart.Have a coupon code')}}?</div>
            <el-form :inline="true" :model="formInline" class="cart-coupon-inline">
              <el-form-item>
                <el-input placeholder="Enter discount code" v-model="formInline.coupon"></el-input>
              </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="couponApply()">{{$t('APPLY')}}</el-button>
                </el-form-item>
            </el-form>
          </div>
          <div class="cart_coupon_right size15 mr20">
            {{$t('TOTAL')}}
            <span class="ml10">{{$t('$')}}726.95</span>
          </div>
        </div>
        <div class="cart_pay ptb30">
          <div class="cart_pay_box">
            <div class="cart_checkout text_c">
              <el-button type="primary" class="cart_checkout_link size16">
                <nuxt-link class="cart_checkout_link" :to="{name: 'paypal', query: {id: '1'}}">{{$t('CHECKOUT')}}</nuxt-link>
              </el-button>
            </div>
            <div class="relative cart_or text_c ptb10">{{$t('cart.OR')}}</div>
            <div class="cart_paypal" @click.stop="paypal()">
              <img :src="require('~/assets/image/paypal.png')" alt="" class="img">
            </div>
          </div>
        </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-dialog title="PRISM" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="Rx" label="Rx" width="150"></el-table-column>
        <el-table-column property="Prism1" label="Prism" width="200"></el-table-column>
        <el-table-column property="Direction1" label="Direction"></el-table-column>
        <el-table-column property="Prism2" label="Prism"></el-table-column>
        <el-table-column property="Direction2" label="Direction"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="PRESCRIPTION FORM" :visible.sync="dialogFormVisible" width="750px">
      <el-form :model="form" label-position="top" class="cart_form">
        <el-form-item label="&nbsp;" >
          <div class="mb20">OD-right</div>
          <div class="mb20">OD-right</div>
        </el-form-item>
        <el-form-item label="Sphere(SPH)" class="cart_edit_sph">
          <el-select v-model="form.sphRight" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
          <el-select v-model="form.sphLeft" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Cylinder(CYL)" class="cart_edit_sph">
          <el-select v-model="form.cylRight" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
          <el-select v-model="form.cylLeft" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Axis(AXI)" class="cart_edit_sph">
          <el-select v-model="form.axiRight" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
          <el-select v-model="form.axiLeft" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="PD" class="cart_edit_sph">
          <el-select v-model="form.pdRight" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
          <el-select v-model="form.pdLeft" placeholder="请选择活动区域">
            <el-option label="0" value="0"></el-option>
            <el-option label="+0.1" value="+0.1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update()">Update</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  asyncData: ({req}) => {

    return {
      formInline: {
        coupon: '',
      },
      arrData: [
        {
          id: 1,
          a: 1
        },
        {
          id:2,
          a: 2
        }
      ],
      dialogVisible: false,
      dialogImageUrl: 'http://192.168.9.103/media/lens/pdc/buy6_09.jpg',
      dialogTableVisible: false
      ,gridData: [{
          Rx: 'OD-Right',
          Prism1: '+0.25',
          Direction1: 'In'
          ,Prism2: "+0.25"
          ,Direction2: "Up"
        }, {
          Rx: 'OS-Left',
          Prism1: '+0.25',
          Direction1: 'In'
          ,Prism2: "-0.25"
          ,Direction2: "Up"
      }, ]
      ,dialogFormVisible: false
      ,form: {
        sphRight: '-0.25'
        ,cylRight: '-0.25'
        ,axiRight: '1'
        ,pdRight: '12'
        ,sphLeft: '+0.25'
        ,cylLeft: '+0.25'
        ,axiLeft: '2'
        ,pdLeft: '2'
      }
    }
  }
  ,data() {
    return {
    }
  }
  ,methods: {
    checkPrism() {
      console.log('cart_prism :>> ');
    }
    ,checkPrescription () {
      console.log('cart_Prescription :>> ');
    }
    ,handleChange(ele) {
      console.log('object :>> ', ele);
    }
    ,couponApply() {
      console.log('coupon :>> ', this.coupon);
    }
    ,paypal() {
      console.log('点击支付 :>> ');
    }
    ,cartEdit() {
      this.dialogFormVisible = true;
    }
    ,checkPrescription() {
      this.dialogVisible = true;
    }
    ,checkPrism() {
      this.dialogTableVisible = true;
    }
    ,update() {
      console.log('更新 :>> ');
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.cart {
  &_box {
    background: $cfff;
  }
  &_menu {
    @include flex();
    padding-top: 15px;
    padding-bottom: 15px;
    background: $bgc-title;
  }
  &_li_top {
    @include flex();
    border-bottom: 1px dashed $c999;
  }
  &_img {
    width:200px;
    .img {width: $s100;}
  }
  &_desc {
    width: 400px;
  }
  &_desc_li {
    line-height: 1.5;
  }
  &_del {
    width: 93.3px;
    @include flex-center(center);
  }
  &_frame {
    flex-grow:1;
    @include flex-center(flex-end);
  }
  &_add {
    width: 200px;
    @include flex-center(center);
  }
  &_li_bottom {
    @include flex();
    border-bottom: 1px solid $c999;
  }
  &_option {
    width: 300px;
  }
  &_option_li {
    &:last-child {
      @include flex();
      .img {
        width: $s100;
      }
    }
  }
  &_item {
    width: 493px;
    @include flex();
    justify-content: space-between;
  }
  &_table {
      border-collapse: separate;
      border-spacing: 20px 0;
  }
  &_table_td {
    color: $theme;
  }
  &_table_th {
    font-weight: unset;
  }
  &_lenses {
    flex-grow:1;
    @include flex();
    justify-content: flex-end;
  }
  &_subtotal {
    right: 20px;
    bottom: 20px;
  }
  &_coupon {
    @include flex-center(space-between);
    border-bottom: 1px solid $c999;
    &_right {
      font-weight: 700;
    }
  }
  &_pay {
    @include flex-center(flex-end);
  }
  &_pay_box {
    width: 240px;
  }
  &_checkout {
    &_link {
      width: $s100;
      height: 50px;
      color: $cfff;
    }
  }
  &_or {
    &::after,
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      width: 40%;
      height: 1px;
      background: $ddd;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
  }
  &_paypal {
    height: 50px;
    .img {
      width: $s100;
      height: $s100;
    }
  }
  &_edit_sph {
    width: 135px;
  }
  &_form {
    @include flex-center(space-around);
  }
}
</style>